<template>
	<view class="root-lay">
		<view class="head-lay flex-h">
			<view class="head-title">{{$t("thickShow.checkInput.title")}}</view>
		</view>

		<view class="content-lay">
			<view class="info-line flex-h">
				<view class="info-item flex-v">
					<view class="info-title">{{$t("thickShow.tableHeads.no")}}</view>
					<view class="info-value">{{selectTableItem? selectTableItem.pos_no : '-'}}</view>
				</view>
				<view class="info-item">
					<view class="info-title">{{$t("thickShow.tableHeads.direct")}}</view>
					<view class="info-value">{{selectTableItem ?selectTableItem.msr_pnt : '-'}}</view>
				</view>
				<view class="info-item">
					<view class="info-title">{{$t("thickShow.tableHeads.thickkness")}}</view>
					<view class="info-value">{{selectTableItem ?selectTableItem.org_thck : '-'}}</view>
				</view>
				<view class="info-item">
					<view class="info-title">{{$t("thickShow.tableHeads.determineValue")}}</view>
					<view class="info-value">{{selectTableItem ?selectTableItem.this_thck : '-'}}</view>
				</view>
				<view class="info-item">
					<view class="info-title">{{$t("thickShow.tableHeads.manage")}}</view>
					<view class="info-value">{{selectTableItem ?selectTableItem.mgt_thck : '-'}}</view>
				</view>
			</view>

			<view class="info-line flex-h">
				<view class="info-item flex-v">
					<view class="info-title">{{$t("thickShow.tableHeads.limit")}}</view>
					<view class="info-value">{{selectTableItem ?selectTableItem.lmt_thck : '-'}}</view>
				</view>
				<view class="info-item" :disabled="!isChkUseTmprCrct">
					<view :disabled="!isChkUseTmprCrct"
						:class="'info-title ' + (!isChkUseTmprCrct ? 'view-disabled-title' : '') ">
						{{$t("thickShow.tableHeads.surfaceTemp")}}</view>
					<input :disabled="!isChkUseTmprCrct"
						:class="'input-value ' + (!isChkUseTmprCrct ? 'view-disabled-value' : '') " type="digit"
						v-model="inputTempValue">
					</input>
				</view>
				<view class="info-item" style="width: 50%;">
					<view class="info-title">{{$t("thickShow.checkInput.tempMaterial")}}</view>
					<view class="info-value">
						<picker @change="bindPickerChange" :value="pickerIndex" :range="pickerArray" range-key="name">
							<view class="info-picker flex-h">
								<view style="width: 100%;">{{pickerArray[pickerIndex].name}}</view>
								<image style="width: 20upx; height: 20upx;"
									src="@/static/imgs/login/icon_dropdown@2x.png" />
							</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="info-line flex-v" style="width: 100%;">
				<view class="flex-h" style="width:100%; align-items: center; justify-content: space-between;">
					<view class="info-title">{{$t("thickShow.tableHeads.memo")}}</view>
					<!-- <checkbox value="cb">{{$t("thickShow.checkInput.inValidCheck")}}</checkbox> -->
					<checkbox-group @change="onCheckChange">
						<checkbox value="check" class="info-check"
							:style=" selectTableItem.is_impossible == 1 ? 'background: #A3D9FF;' : ''"
							:checked="selectTableItem ? selectTableItem.is_impossible == 1 : 0">
							{{$t("thickShow.checkInput.inValidCheck")}}
						</checkbox>
					</checkbox-group>
				</view>
				<textarea class="input-str" placeholder-style="color:#7f7f7f" :placeholder="$t('warnning.inputTip')"
					v-model="selectTableItem.dummy" />
			</view>

			<view class="info-line flex-h" style="width: 100%;">
				<view class="info-title">{{$t("thickShow.checkInput.tempLastVal")}}</view>
				<view class="info-value" style="width: 40%;">fd</view>
				<view class="info-btn">{{$t("thickShow.checkInput.apply")}}</view>
			</view>

			<view class="info-line check-table flex-v" style="width: 100%;">
				<view class="check-table-title">{{$t("thickShow.tableHeads.determineValue")}}</view>
				<scroll-view scroll-y="true" class="scroll-lay">
					<view :class="'table-item flex-h ' + (selectTableIndex == index ? 'table-item-select' : ' ') "
						v-for="(item,index) in tableDataList" :key="index" @click="onTableItemClick(index)">
						<view class="item-title">{{item.msr_pnt}}</view>
						<!-- <view class="item-value">{{item.this_thck}}</view> -->
						<input class="item-value" style="background-color: #fff;"
							:type="item.is_impossible == 1? 'text':'digit'" v-model="item.this_thck"
							@input="item.isChanged = true" :disabled="item.is_impossible == 1">
						</input>
					</view>
				</scroll-view>

			</view>
		</view>

		<view class="bottom-lay flex-h">
			<view class="btn" @click="onCancelClick">{{$t("public.cancel")}}</view>
			<view class="btn" style="color: #1890FF; margin-left: 1upx;" @click="onConfirmClick">
				{{$t("public.confirm")}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requireThickDetailData,
		requireThickDetailDataByPosNo,
		updateSurfaceTempByPosNo,
		updateThickDetailDataByPosNoArray
	} from "@/localService/thickService.js";

	import vTable from "@/components/no-bad-table/table.vue";
	import selectData from "@/common/thick_show_data.js";
	export default {
		props: ['posNo'],

		components: {
			vTable
		},
		data() {
			let _self = this;
			return {
				// 列表页选中的条目数据
				selectTableData: null,

				tableDataList: [],
				selectTableIndex: 0,
				selectTableItem: null,

				pickerIndex: 0,
				pickerArray: [{
					name: _self.$t("public.carbonSteelStr")
				}, {
					name: _self.$t("public.carbonSteelExceptStr")
				}],

				inputTempValue: '',
				isChkUseTmprCrct: getApp().globalData.thickSetting.ChkUseTmprCrct
			}
		},

		watch: {
			selectTableItem(val) {},

			selectTableIndex(val) {
				this.selectTableItem = this.tableDataList[this.selectTableIndex];
			}
		},

		mounted() {
			this.isChkUseTmprCrct = getApp().globalData.thickSetting.ChkUseTmprCrct;
			console.log("==========mounted()==================")
			console.log(this.isChkUseTmprCrct)
			this.selectTableData = getApp().globalData.selectListItemData;
			this.requireThickDetailDataByPosNoApi(this.selectTableData.dmg_code, this.posNo);
			this.selectTableIndex = 0;
		},

		methods: {
			requireThickDetailDataByPosNoApi(inDmgCode, inPos) {
				console.log("requireThickDetailDataByPosNoApi - inDmgCode = " + inDmgCode);
				let _self = this;
				requireThickDetailDataByPosNo(inDmgCode, inPos).then(dataList => {
					console.log(dataList);
					for (let i = 0; i < dataList.length; i++) {
						dataList[i].index = i + 1;
						dataList[i].id = "thickShowTable-" + i;

						dataList[i].planSign = dataList[i].plan_cls_type == 3 ? '●' : (dataList[i].plan_cls_type ==
							2 ? '●' : (dataList[i].plan_cls_type == 1 ? '○' : ''));
					}
					_self.tableDataList = dataList;

					_self.tableDataList.forEach(e => {
						if (e.is_impossible)
							e.this_thck = "NA";
					})

					_self.selectTableItem = _self.tableDataList[_self.selectTableIndex];
					_self.inputTempValue = _self.selectTableItem.temperature;
				})
			},

			updateThickDetailDataByPosNoApi() {
				console.log("updateThickDetailDataByPosNoApi -----   -----   -----");
				// if(getApp().globalData.thickSetting.)
				// 				isChkUseTmprCrct: getApp().globalData.thickSetting.ChkUseTmprCrct

				// 计算补正值
				if (getApp().globalData.thickSetting) {
					this.tableDataList.forEach(eItem => {
						if (eItem.is_impossible == 0) {
							if (getApp().globalData.thickSetting.ChkUseTmprCrct) {
								if(eItem.this_thck != '') {
									let T = Number(eItem.this_thck);
									let TE = Number(eItem.temperature);
									let tempForm = this.pickerIndex == 0 ? getApp().globalData.thickSetting
										.TxtFormulaCs : getApp().globalData.thickSetting.TxtFormulaSus;
									tempForm = tempForm.replace(/{/g, " ")
									tempForm = tempForm.replace(/}/g, " ")
									
									let tempRe = Math.floor(eval(tempForm) * 10) / 10;
									tempRe = tempRe.toFixed(2);
									console.log(`APP === ${T} === ${TE} === ${tempRe}`)
									console.log(`updateThickDetailDataByPosNoApi ----- ${T} -----  ${TE}  -----`);
									console.log(`updateThickDetailDataByPosNoApi ----- ${tempForm}`);
									console.log(`updateThickDetailDataByPosNoApi ----- ${tempRe}`);
									eItem.corrvalue = tempRe;
								} else 
									eItem.corrvalue = '';
								
								// 判断计划状态	
								if(eItem.this_thck == "") {
									if(eItem.plan_cls_type == 2)
										eItem.plan_cls_type = 1;
									else if(eItem.plan_cls_type == 3)
										eItem.plan_cls_type = 4;
								} else {
									if(eItem.plan_cls_type == 1)
										eItem.plan_cls_type = 2;
									else if(eItem.plan_cls_type == 4)
										eItem.plan_cls_type = 3;
								}
							}
						}
					})
				}
				
				updateThickDetailDataByPosNoArray(this.tableDataList).then(e => {
					console.log("updateThickDetailDataByPosNoApi -----  re  -----  re  -----");
					console.log(e);
				})
			},

			updateSurfaceTempByPosNoApi() {
				// updateSurfaceTempByPosNo
				updateSurfaceTempByPosNo(this.selectTableData.dmg_code, this.posNo, this.inputTempValue).then(e => {
					console.log(e);
				})
			},



			onTableItemClick(inIndex) {
				this.selectTableIndex = inIndex;
			},

			onCheckChange(e) {
				console.log(e);
				this.selectTableItem.is_impossible = e.detail.value.length > 0 ? 1 : 0;
				this.selectTableItem.this_thck = e.detail.value.length > 0 ? 'NA' : '';
				this.selectTableItem.isChanged = true;
				if (this.selectTableItem.is_impossible == 1) {
					this.selectTableItem.this_thck = "NA"
				}
			},

			onCancelClick() {
				this.$emit("closePopup");
			},

			async onConfirmClick() {
				uni.showLoading();
				await this.updateSurfaceTempByPosNoApi();
				await this.updateThickDetailDataByPosNoApi();
				uni.hideLoading();
				this.onCancelClick();
			},


			bindPickerChange(e) {
				this.pickerIndex = e.detail.value
			}
		}
	}
</script>

<style scoped lang="scss">
	.root-lay {}

	.bottom-lay {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		align-items: center;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
		background: #ffffff;

		.btn {
			width: 50%;
			line-height: 34upx;
			background-color: #fff;
			// padding: 10upx;
			font-weight: 500;
			color: #000000;
			font-size: 13upx;
			text-align: center;
		}

		.btn:first-child {
			border-right: 1upx solid rgba(0, 0, 0, 0.1);
		}
	}

	.head-lay {
		position: fixed;
		top: 0;
		width: 100%;
		background: #FFFFFF;
		border-bottom: 1upx solid rgba(232, 232, 232, 1);

		.head-title {
			line-height: 34upx;
			margin: 0 auto;
			font-size: 13upx;
			font-weight: 500;
			color: #333333;
		}
	}

	.content-lay {
		position: relative;
		top: 34upx;
		height: calc(100vh - 68upx);
		// height: 800px;
		overflow-y: auto;
		// width: 55vw;
		width: 100%;
		border: 1px solid #E8E8E8;
		padding: 14upx 9upx;
		box-sizing: border-box;
	}

	.info-line {
		align-items: center;
		width: 100%;
		margin-bottom: 13upx;
		justify-content: space-between;

		.info-item {
			width: 18%;
		}

		.info-title {
			font-size: 12px;
			color: #1F2329;
			// margin-bottom: 5upx;
			// padding: 5upx;
		}

		.info-check {
			padding: 5upx 10upx;
			border-radius: 2px;
			font-size: 12px;
		}

		.info-value {
			background-color: #fdfacc;
			border-radius: 1px;
			border: 1px solid #cfd3d5;
			padding: 0 9px;
			font-weight: 400;
			font-size: 12px;
			height: 20px;
		}

		.input-value {
			border-radius: 1px;
			border: 1px solid #cfd3d5;
			padding: 0 9px;
			font-weight: 400;
			font-size: 12px;
			height: 20px;
		}

		.info-picker {
			align-items: center;
		}

		.input-str {
			box-sizing: border-box;
			width: 100%;
			margin-top: 10upx;
			padding: 15upx;
			border: 1px solid #CFD3D5;
		}

		.info-btn {
			background: #F6F6F6;
			border-radius: 2px;
			border: 1px solid #DEE0E3;
			padding: 5px 10px;
		}
	}

	.check-table {
		border: 1px solid #E8E8E8;

		.scroll-lay {
			height: 30vh;
		}


		.check-table-title {
			width: 100%;
			color: #000;
			background: #F8F8F9;
			border-bottom: 1px solid #E8E8E8;
			text-align: center;
			padding: 10px 0;
		}

		.table-item {
			width: 100%;
			color: #000;
			background: #fff;
			border-bottom: 1px solid #E8E8E8;
			text-align: center;
			padding: 10upx;

			.item-title {
				width: 50%;
				border-right: 1px solid #E8E8E8;
				font-size: 12px;
			}

			.item-value {
				width: 50%;
				font-size: 12px;
			}
		}

		.table-item-select {
			border: 1px solid #666666;
		}
	}

	.view-disabled-title {
		background-color: #ebeef5 !important;
	}

	.view-disabled-value {
		color: #555555 !important;
		background-color: #ebeef5 !important;
	}
</style>
